<!DOCTYPE html>
<html>

<head>
    <meta charset='utf-8' />
    <title>创建可拖动的点</title>
    <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
    <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v1.1.1/mapbox-gl.js'></script>
    <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.1.1/mapbox-gl.css' rel='stylesheet' />
    <style>
        body {
            margin: 0;
            padding: 0;
        }

        #map {
            position: absolute;
            top: 0;
            bottom: 0;
            width: 100%;
        }
    </style>
</head>

<body>


    <style>
        .coordinates {
            background: rgba(0, 0, 0, 0.5);
            color: #fff;
            position: absolute;
            bottom: 40px;
            left: 10px;
            padding: 5px 10px;
            margin: 0;
            font-size: 11px;
            line-height: 18px;
            border-radius: 3px;
            display: none;
        }
    </style>

    <div id='map'></div>
    <pre id='coordinates' class='coordinates'></pre>

    <script>
        mapboxgl.accessToken = 'pk.eyJ1Ijoiam9obmZvcnJlc3QiLCJhIjoiY2tjeXBrN3JjMGM0ZzJ3cnl0OWJscHlxYSJ9.GsQMG6Tfi05l4BbRqegJeQ';

        var coordinates = document.getElementById('coordinates');

        var map = new mapboxgl.Map({
            container: 'map',
            style: 'mapbox://styles/mapbox/streets-v11',
            center:  [14.212459,24.208158],
            zoom: 1
        });

        // MapbBox GL以Marker方式批量加载多个点坐标及实例
        const markers = [{
            color: '#ff0000',
            position: [108.937724, 34.354122],
            content: "位置1",
            offset: [-10, -20],
            direction: "right"
        }, {
            color: '#ffffff',
            position: [114.057868, 22.535256],
            content: "位置2",
            offset: [10, 0],
            direction: "left"
        }, {
            color: '#ffffff',
            position: [121.666072, 31.073487],
            content: "位置3",
            offset: [10, -20],
            direction: "left"
        }, {
            color: '#ffffff',
            position: [13.782559, 53.241914],
            content: "位置4",
            offset: [-10, -20],
            direction: "right"
        }, {
            color: '#ffffff',
            position: [151.107195, -33.80666],
            content: "位置5",
            offset: [-10, -10],
            direction: "right"
        }, {
            color: '#ffffff',
            position: [-124.740278, 50.413675],
            content: "位置6",
            offset: [-10, -10],
            direction: "right"
        }, {
            color: '#ffffff',
            position: [-115.243971, 32.761748],
            content: "位置7",
            offset: [-10, -10],
            direction: "right"
        }, {
            color: '#ffffff',
            position: [-72.606031, 42.087923],
            content: "位置8",
            offset: [10, -10],
            direction: "left"
        }];


        markers.forEach(function (marker) {
            const marker_on = new mapboxgl.Marker({
                color: marker.color,
                anchor: "center",
                draggable: false,
            }).setLngLat(marker.position)
                .addTo(map);

            const el = marker_on.getElement();
            el.addEventListener('click', () => {
                window.alert(marker.content);
            });

            // const popup = new mapboxgl.Popup({ anchor: marker.direction, offset: marker.offset, className: 'info', closeButton: false, closeOnClick: false, maxWidth: '200px' })
            //     .setLngLat(marker.position)
            //     .setHTML(marker.content)
            //     .addTo(map);


        });













    </script>

</body>

</html>